<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>南方农机大赛报名</title>
		<link rel="stylesheet" href="css/frozen.css">
		<link rel="stylesheet" href="css/mystyle.css" />
		<link rel="stylesheet" href="css/LArea.css">
		<script src="js/lib/zepto.min.js"></script>
		<style type="text/css">
			.ui-dialog {
				margin: 0 auto !important;
			}
			
			.ui-form-item .saishi label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio) {
				position: static;
				width: auto;
				margin-bottom: .1rem;
			}
			
			.ui-checkbox input:checked:before,
			.ui-checkbox-s input:checked:before {
				color: #e8b755;
			}
			
			.ui-btn-s {
				color: #efab25;
			}
			
			.ui-dialog-ft button.select {
				background-color: #f1f1f1;
			}
			
			.ui-dialog-cnt {
				width: 6rem;
			}
			
			.ui-dialog-bd {
				padding: 18px 18px 18px 39px;
			}
			
			.saishi p {
				font-size: .3rem;
				margin-bottom: 0.13rem;
			}
		</style>
	</head>

	<body>
		<div class="signup-tit">
			<p>报名信息确认</p>
		</div>
		<form action="" method="post" id="signup-form">
			<div class="signup-block">
				<div class="ui-form-item border-bot">
					<label for="username">姓名</label>
					<input type="text" placeholder="请输入您的姓名" id="username" class="username" name="name">
				</div>
				<div class="ui-form-item clearfix border-bot">

					<label>性别</label>
					<div class="sexual" style="float: right;">
						<label class="ui-radio" for="radio">
			            <input type="radio" checked name="gender" value="1" class="sex">
			        </label>
						<span>男</span>

						<label class="ui-radio female" for="radio">
			            <input type="radio"  name="gender" value="2" class="sex">
			        </label>
						<span>女</span>
					</div>
				</div>
				<div class="ui-form-item border-bot">
					<label for="age">年龄</label>
					<input type="number" placeholder="年龄须为55周岁（含）以下" id="age" class="age" name="" maxlength="2">
				</div>
			</div>
			<div class="signup-block">
				<div class="ui-form-item border-bot">
					<label for="eduDeg">文化程度</label>
					<div class="ui-select">
						<select id="eduDeg" class="eduDeg" name="">
							<option value="e1" selected="selected">小学</option>
							<option value="e2">初中</option>
							<option value="e3">高中</option>
							<option value="e4">大学</option>
							<option value="e5">其它</option>
						</select>
					</div>
				</div>
				<div class="ui-form-item border-bot">
					<label for="major">专业</label>
					<input type="text" placeholder="请输入您的专业（选填项）" id="major" class="major" name="">
				</div>
				<div class="ui-form-item border-bot">
					<label for="job">职业</label>
					<input type="text" placeholder="请输入您的职业（选填项）" id="job" class="job" name="">
				</div>
				<div class="ui-form-item">
					<label for="per-pic">个人照片</label>
					<p class="uploadPic">点击选择图片上传</p>
					<input type="file" name="fileToUpload" class="fileToUpload" accept="image/gif, image/jpeg, image/jpg" capture="camera" />
				</div>
			</div>

			<div class="signup-block">
				<div class="ui-form-item">
					<label for="idcard">身份证号码</label>
					<input type="number" placeholder="请输入18位身份证号码" oninput="if(value.length>18)value=value.slice(0,18)" id="idcard" class="idcard" name="id_unmber">
				</div>
			</div>
			<div class="signup-block">
				<div class="ui-form-item border-bot">
					<label>申请鉴定工种</label>
					<input type="text" id="reqType" class="reqType" name="" disabled="disabled" readonly="readonly" value="农业机械操作工">
				</div>
				<div class="ui-form-item border-bot">
					<label>驾驶证、资格证书类别</label>
					<div class="ui-select entries-model">
						<input type="text" readonly placeholder="点击选择证书类别(可多选)" class="licenseitem" />
						<div class="ui-dialog">
							<div class="ui-dialog-cnt">
								<div class="ui-dialog-bd">
									<div class="saishi">
										<p>
											<label class="ui-checkbox-s"><input type="checkbox" class="ss1" name="tt[]"  value="license1">
			    							</label>拖拉机联合收割机驾驶证
										</p>
										<p>
											<label class="ui-checkbox-s"><input type="checkbox" class="ss1" name="tt[]"  value="license2">
											</label>农机修理工
										</p>

									</div>
								</div>
								<div class="ui-dialog-ft ui-btn-group">
									<button type="button" data-role="button" class="select">确认</button>
								</div>
							</div>
						</div>
						<script type="text/javascript">
							$(".licenseitem").click(function() {
								$(".ui-dialog").dialog("show");
							});
							var entryTest = false;
							var entry1 = "";
							$(".select").click(function() {
								var entry = "";
								$(".ui-dialog").dialog("hide");
								$(".ss1:checked").each(function() {
									entry += $(this).val() + ",";
								});
								if(entry !== "") {
									$(".licenseitem").val("已选择");
									entryTest = true;
								} else {
									entryTest = false;
									$(".licenseitem").val("");
								}
								entry1 = entry;
							})
						</script>

					</div>
				</div>

				<div class="ui-form-item">
					<label for="cre-ago">原证书等级、编号</label>
					<input type="text" id="cre-ago" class="cre-ago" name="" value="" placeholder="请输入原证书等级及编号">
				</div>

			</div>
			<div class="signup-block">
				<div class="ui-form-item clearfix">
					<label for="entries">参赛项目</label>
					<input type="text" readonly class="saishiitem" value="五项全能" />

				</div>
			</div>
			<div class="signup-block">
				<div class="ui-form-item border-bot">
					<label for="telphone">手机号码</label>
					<input type="number" placeholder="请输入11位手机号码" id="telphone" oninput="if(value.length>11)value=value.slice(0,11)" name="phone">
				</div>

				<div class="ui-form-item border-bot">
					<label for="city" style="margin-top: .3rem;">所属单位</label>
					<div class="content-block">
						<input id="city" type="text" readonly placeholder="点击选择城市" />
						<input id="value2" type="hidden" />
						<input type="text" name="" id="detail-addr" class="detail-addr" placeholder="在此处输入详细地址" />
					</div>
				</div>
				
				<div class="ui-form-item">
					<label for="postcode">邮政编码</label>
					<input type="number" placeholder="请输入6位邮编（选填项）" id="postcode" class="postcode" oninput="if(value.length>6)value=value.slice(0,6)" name="">
				</div>
			</div>
			<div class="signup-block">
				<div class="ui-form-item clearfix">
					<label for="resume" style="margin-top: .8rem;">工作简历</label>
					<textarea class="resume" id="resume" name="" rows="3" placeholder="（请输入10-100个字符）&#13;&#10;示例：2001年至今从事农田作业"  oninput="if(value.length>100)value=value.slice(0,100)"></textarea>
				</div>
			</div>
			
			<div class="attentions">
				<p>温馨提示</p>
				<p>本人同意向组办方提供有效的身份证和资料用于所有本人的身份，并同意承担因身份证件和资料不实所产生的全部责任。</p>
			</div>
			<button class="apply-signup-btn" value="提交报名">提交报名</button>
		</form>

		<script src="js/size.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/frozen.js"></script>
		<script src="js/LAreaData2.js"></script>
		<script src="js/LArea.js"></script>
		<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/upload.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var area2 = new LArea();
			area2.init({
				'trigger': '#city',
				'valueTo': '#value2',
				'keys': {
					id: 'value',
					name: 'text'
				},
				'type': 2,
				'data': [provs_data, citys_data, dists_data]
			});

			/******图片上传*****/
			$(function() {
				$(".fileToUpload").fileUpload({
					"url": "savetofile.php",
					"file": "myFile"
				});
				$(".fileToUpload").on("change",function(){
					if($(".fileToUpload").val() == ""){
						$(".uploadPic").text("点击选择图片上传").removeClass("black");
					}else{
						$(".uploadPic").text("已上传").addClass("black");
					}
				});
			})
			
			/******表单提交*******/
			$(".apply-signup-btn").bind("touchend", function() {
				var username = $("#username").val(),//姓名
					sex = $(".sex:checked").val(),//性别
					age = $("#age").val(),//年龄
					edu_deg=$("#eduDeg option:checked").val(),//学历
					major=$("#major").val(),//专业--选填
					job=$("#job").val(),//职业--选填
					per_pic=$(".fileToUpload").val(),//照片
					idcard = $("#idcard").val(),//身份证
					req_type=$("#reqType").val(),//申请鉴定工种
					cre_ago=$("#cre-ago").val(),//证书等级编号
//					drilicense = $("#dri-license").val(),
					telphone = $("#telphone").val(),
					city = $("#city").val(),
					detail_addr=$("#detail-addr").val(),//详细地址
					postcode=$("#postcode").val(),//邮编--选填
					resume=$("#resume").val();//个人简历
				var regName = /^[a-z\u4E00-\u9FA5]{2,7}$/i,
					regAge = /^[1-9]\d$/,
					regIdCard = /^\d{17}[\dx]$/i,
					regPhone = /^1[34578]\d{9}$/;

				//console.log(username + " " + sex + " " + age+ " " +edu_deg + " " +major+ " " + idcard + " " + drilicense + " " + telphone + " " + city);
				if(!(regName.test(username))) {
					$.tips({
						content: '请输入正确姓名',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(!(regAge.test(age)) || age > 55) {
					$.tips({
						content: '您的年龄不符合要求',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(per_pic == "") {
					$.tips({
						content: '请上传您的个人照片',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(!(regIdCard.test(idcard))) {
					$.tips({
						content: '请输入正确身份证号',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(entry1==""){
					$.tips({
						content: '请选择驾驶证、资格证书类别',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(cre_ago==""){
					$.tips({
						content: '请输入原证书等级及编号',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(!(regPhone.test(telphone))) {
					$.tips({
						content: '请输入正确手机号码',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(city == "" || detail_addr== "") {
					$.tips({
						content: '请输入所属单位',
						stayTime: 2000,
						type: "warn"
					});
					return false;
				}
				if(resume==""){
					$.tips({
							content: '请输入工作简历',
							stayTime: 2000,
							type: "warn"
						});
						return false;
				}else {
					layer.open({
						content: '您已报名成功，点击按钮返回首页',
						btn: '我知道了',
						yes: function(index) {
							$("#signup-form")[0].reset();
							history.back();
							layer.close(index)
						}
					});
					$(".apply-signup-btn").attr({
						"disabled": true
					});
					console.log($("#signup-form").serialize());
					$.ajax({
						type: 'post',
						url: '',
						data: $("#signup-form").serialize(),
						dataType: 'json',
						success: function(result) {
							var dia = $.dialog({
								title: '温馨提示',
								content: '您已报名成功，点击按钮离开当前页面。谢谢！',
								animation: 'pop',
								button: ["知道了"]
							});
							dia.on("dialog:action", function(e) {
								$("#signup-form")[0].reset();
								history.back();
							});

							$("#signup-form")[0].reset();
							setTimeout(function() {
								history.back();
							}, 1800);
						},
						error: function(result) {
							$.tips({
								content: '提交失败，请重试',
								stayTime: 2000,
								type: "warn"
							});
							$(".apply-signup-btn").removeAttr("disabled");
						}
					})
				}
				//console.log(username+" "+sex+" "+age+idcard+" "+carmodel+" "+drilicense+" "+entry+telphone+" "+city+company);
			});
		</script>
	</body>

</html>